<template>
  <div class="shopps">
    <div class="selects">
      <div class="all" else @click="alltype">
         <span>全部商品 </span>
         <img class="imgs" ref="imgs" src="../../assets/images/icon_select.png"/>
      </div>
      <div class="all_son" v-if="all">
        <ul>
          <li><router-link to="" exact>新生儿疾病筛查型</router-link></li><br/>
          <li><router-link to="/detail">产前筛查型</router-link></li><br/>
          <li><router-link to="/detail">体检型</router-link></li><br/>
          <li><router-link to="/detail">903滤纸</router-link></li><br/>
          <li><router-link to="/detail">新筛试剂</router-link></li>
        </ul>
      </div>
    </div>

    <div class="detail">
      <ul>
        <li v-for="(item, index) in items" :key="index"
         @mouseenter="mouseEnter(index)"
          @mouseleave="mouseLeave"
          :class="{active:index === isActive}"
          >
          <router-link :to="item.url" >
            <img class="img5" :src="item.img"/><br/>
            <span class="miao1">{{item.title}}</span><br/>
            <h6>{{item.entitle}}</h6>
          </router-link>
        </li>
      </ul>
    </div>
    <v-footer style="position:relative; top:2.3rem"></v-footer>
  </div>
</template>

<script>
import footer from '../footer'
export default {
  data () {
    return {
      all: false,
      isActive: false,
      items: [
        {
          img: require('../../assets/images/carousel1.png'),
          title: '新生儿疾病筛查型',
          entitle: 'Neonatal screening type',
          url: '/detail'
        },
        {
          img: require('../../assets/images/carousel2.png'),
          title: '滤纸',
          entitle: 'Neonatal screening type',
          url: '/detail'
        },
        {
          img: require('../../assets/images/carousel3.png'),
          title: '产前筛查采血卡',
          entitle: 'Neonatal screening type',
          url: '/detail'
        },
        {
          img: require('../../assets/images/carousel1.png'),
          title: '通用体检型',
          entitle: 'Neonatal screening type',
          url: '/detail'
        },
        {
          img: 'http://dhgl.ldxxw.com.cn/upload/product/48/201703311230498051_250.jpg',
          title: '新生儿疾病筛选查通用型',
          entitle: 'Neonatal screening type',
          url: '/5'
        }
      ]
    }
  },
  methods: {
    alltype: function () {
      this.all = !this.all
      this.$refs.imgs.style.transform = this.all ? 'rotate(0deg)' : 'rotate(180deg)'
    },
    mouseEnter (index) {
      this.isActive = index
    },
    mouseLeave () {
      this.isActive = null
    }
  },
  components: {
    'v-footer': footer
  }
}
</script>

<style scoped lang="less">
@import "../../assets/less/shopp.less";
</style>
